<template>
	<view class="flex"  @tap="toDrawDetails()" hover-class="none">
		<image :src="item.activityUrl" mode="aspectFill" class="border-radius10 mc-flex-none" style="width: 228rpx;height: 184rpx;"></image>
		<view class="margin-left20 mc-flex-auto flex-column mc-space-between">
			<view class="mc-f13 mc-bold">{{item.activityName}}</view>
			<view class="mc-flex-vcenter mc-f11" style="height: 30rpx;" v-if="isShowProgress">
				<view class="progress-bar-wrap mc-flex-auto">
					<view class="bg-color-orange border-radius" style="height: 100%;" :style="{width:progress+'%'}"></view>
				</view>
			</view>
			<view class="mc-flex-vcenter mc-f10">
				<view style="width: 112rpx;">
					<text class="color-red" v-if="isOngoing">已砍{{progress}}%</text>
					<text class="color-red" v-else-if="isComplete">已完成</text>
					<text class="color-red" v-else-if="isExchange">已兑换</text>
					<text style="color: #bbbbbb;" v-else-if="isOverdue">已下架</text>
					<text style="color: #bbbbbb;" v-else-if="isInvalid">已失效</text>
				</view>
				<view class="mc-flex-vcenter" :class="!isOngoing?'mc-gray':'mc-g8'" v-if="isShowProgress">
					<view class="mc-bg-light-gray padding-left6 padding-right6 border-radius4">{{hour}}</view>
					<view class="padding-left2 padding-right2">:</view>
					<view class="mc-bg-light-gray padding-left6 padding-right6 border-radius4">{{minute}}</view>
					<view class="padding-left2 padding-right2">:</view>
					<view class="mc-bg-light-gray padding-left6 padding-right6 border-radius4">{{second}}</view>
				</view>
				<button @tap.stop="toExchange()" type="primary" class="bargain-btn bargain-btn-red" v-if="isComplete">去兑换</button>
				<button @tap.stop="toDrawDetails()" type="primary" class="bargain-btn bargain-btn-orange" v-if="isOngoing">继续砍价</button>
				<button @tap.stop="toDrawDetails()" type="primary" class="bargain-btn bargain-btn-red" v-if="isInvalid && !isOverdue">再次挑战</button>
			</view>
		</view>
	</view>
</template>

<script>
	/**
	 *  简单封装了下， 应用范围比较狭窄，可以在此基础上进行扩展使用
	 *  比如加入image， iconSize可控等
	 */
	export default {
		name: 'bargain-list-item',
		data() {
			return {
				timers: null,
				time:0
			};
		},
		props: {
			item: {
				type: Object,
				default: null
			},
		},
		computed: {
			isShowProgress:function(){
				return (!this.isOverdue && this.item.status==3) || this.item.status==1
			},
			isOngoing: function() { //是否进行中
				return this.item.status === 1 && this.time != 0
			},
			isComplete: function() { //是否砍价成功
				return this.item.status === 2
			},
			isInvalid: function() { //是否失效
				return this.item.status === 3 && this.time == 0
			},
			isExchange: function() { //是否已兑换
				return this.item.status === 4
			},
			isOverdue: function() {  //是否逾期
				return this.item.isInvalid
			},
			progress:function() { //百分比进度
				let progress = (parseFloat(this.item.cutDownPrice * 100) / this.item.price).toFixed(1);
				progress = progress > 100 ? 100 : progress;
				return progress || 0
			},
			hour:function(){
				return this.$util.joinZeroNum(parseInt(this.time/3600)) || '00'
			},
			minute:function(){
				return this.$util.joinZeroNum(parseInt(this.time/60)%60) || '00'
			},
			second:function(){
				return this.$util.joinZeroNum(parseInt(this.time)%60) || '00'
			},
		},
		mounted() {
			this.countDown()
		},
		beforeDestroy() {
			if(this.timers){
				clearTimeout(this.timers)
				this.timers = null
			}
		},
		methods: {
			countDown() {
				const time = parseInt((this.item.endTime - new Date().getTime())/1000);
				this.time=time>0?time:0
				if (time > 0)
					this.timers = setTimeout(() => {
						this.countDown()
					}, 1000)
			},
			toDrawDetails() {
				this.$util.debounce(() => {
					uni.navigateTo({
						url: '/pages/bargain/details/details?bargainPartakeId=' + this.item.id
					})
				})()
			},
			toExchange(){
				this.$util.debounce(() => {
					uni.navigateTo({
						url: '/pages/bargain/found/found?id=' + this.item.id
					})
				})()
			}
		}
	};
</script>

<style lang='scss' scoped>
	.progress-bar-wrap {
		background-color: #E1E1E1;
		border-radius: 1000px;
		height: 8rpx;
	}

	.bargain-btn {
		margin-right: 0;
		padding: 0 40rpx;
		height: 56rpx;
		line-height: 56rpx;
		font-size: 24rpx;
		border-radius: 1000px;
	}

	.bargain-btn-orange {
		background-color: #2696ff;
	}

	.bargain-btn-red {
		background-color: #ff4826;
	}
</style>
